<template>
 <div class="vue-progress-bar default-theme">
  <div class="vue-progress-bar__tip">
   <span class="vue-progress-bar__tiplabel">{{label}}</span>
   <span class="vue-progress-bar__tiptext">{{text}}</span>
  </div>
  <div class="vue-progress-bar__outer">
   <div class="vue-progress-bar__inner" :style="barStyle"></div>
  </div>
 </div>
</template>
 
<script>
export default {
  props: {
    label: String,
    text: String,
    // 高度
    height: {
      type: Number,
      default: 0,
      required: true,
      validator: val => val >= 0
    },
    // 进度条颜色
    color: {
      type: String,
      default: ''
    },
    // 进度条
    percentage: {
      type: Number,
      default: 0,
      required: true,
      validator: val => val >= 0 && val <= 100
    }
  },
  computed: {
    barStyle() {
      const style = {};
      style.width = this.percentage + '%';
      style.height = this.height + 'px';
      style.borderRadius = 3 + 'px'
      style.background = 'linear-gradient(90deg,rgba(250,146,49,1) 0%,rgba(243,85,85,1) 100%)'
      return style
    }
  }
}
</script>
 
<style lang="scss" scoped>
 .vue-progress-bar.default-theme{
  .vue-progress-bar__outer {
    background: #eee;
    border-radius: 3px;
  }
 }
 
 .vue-progress-bar {
  .vue-progress-bar__tiptext {
   float: right;
  }
 }
</style>